<template>
  <div class="cloud-info" ref="cloudBoxRef">
    <p class="cloud-title">展商信息</p>
    <el-card shadow="hover" style="margin-top: 10px">
      <template v-if="customerDetail.companyType === '3'">
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item label="是否对外贸易">{{customerDetail.externalTrade}}</el-descriptions-item>
          <el-descriptions-item label="外贸占比">{{customerDetail.externalTradeRatio}}</el-descriptions-item>
          <el-descriptions-item label="是否定制">{{getCustomMode(customerDetail.customMade)}}</el-descriptions-item>
          <el-descriptions-item label="面积（㎡）">{{customerDetail.area}}</el-descriptions-item>
          <el-descriptions-item label="服务范围">{{customerDetail.serviceScope}}</el-descriptions-item>
          <el-descriptions-item label="是否能产品备案">{{customerDetail.filings}}</el-descriptions-item>
          <el-descriptions-item label="年产量">{{customerDetail.annualOutput}}</el-descriptions-item>
          <el-descriptions-item label="年产值">{{customerDetail.annualValue}}</el-descriptions-item>
          <el-descriptions-item label="研发人员数">{{customerDetail.researchStaffNum}}</el-descriptions-item>
          <el-descriptions-item label="原材料备案数">{{customerDetail.filingsNum}}</el-descriptions-item>
          <el-descriptions-item label="起订量">{{customerDetail.minOrder}}</el-descriptions-item>
          <el-descriptions-item label="专利数">{{customerDetail.patent}}</el-descriptions-item>
          <el-descriptions-item label="模具数">{{customerDetail.modelNum}}</el-descriptions-item>
          <el-descriptions-item label="包装开发人数">{{customerDetail.packDesigners}}</el-descriptions-item>
          <el-descriptions-item label="研发工程师">{{customerDetail.engineer}}</el-descriptions-item>
          <el-descriptions-item label="材料产品数">{{customerDetail.materialProductNum}}</el-descriptions-item>
        </el-descriptions>

        <div class="partner-box">
          <p class="title">合作用户：</p>
          <div class="partner-main">
            <div class="partner-item" v-for="(item, index) of partnerVoList" :key="index">
              <el-image style="width: 100px; height: 100px" :src="item.partnerLogo" fit="contain" />
              <p>合作用户名：{{item.partnerName}}</p>
              <p>合作伙伴类型：{{getPartnerType(item.partnerType)}}</p>
            </div>
            <!--            <div>合作用户名：{{item.partnerName}}</div>-->
            <!--            <div>合作伙伴类型：{{getPartnerType(item.partnerType)}}</div>-->
            <!--            <div>-->
            <!--              合作用户logo：-->
            <!--              <el-image v-for="(sItem, inx) of getLogo(item.partnerLogo)" :key="inx" style="width: 100px; height: 100px" :src="sItem" :fit="fit" />-->
            <!--            </div>-->
          </div>
        </div>
      </template>

      <div class="category-item">
        <span>一级品类：</span>
        {{oneCategory?.dictLabel}}
      </div>

      <div class="category-item">
        <span>二级品类：</span>
        {{twoCategory}}
      </div>

      <div class="category-item">
        <span>主推：</span>
        {{mainPushLabel}}
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {customerDetail} from "../customerService";
import {dictList} from "@/api/dict";

const cloudBoxRef = ref<any>();
const categoryData = ref<Record<string, any>[]>([]);
const partnerVoList = computed(() => customerDetail.value.partnerVoList || []);
const oneCategory = computed(() => {
  const categoryOne = customerDetail.value.customCategoryVo?.categoryOne
  return categoryData.value.find((item: any) => item.dictValue === categoryOne)
})
const twoCategory = computed(() => {
  const arr = oneCategory.value?.childDataVo || []
  const categoryTwo = customerDetail.value.customCategoryVo?.categoryTwo
  const list  = categoryTwo ? categoryTwo.split(',') : []
  const labelList: string[] = []
  arr.forEach((item: any) =>  {
    if (list.includes(item.dictValue)) labelList.push(item.dictLabel)
  })
  return labelList.join(',')
})
const mainPushLabel = computed(() => {
  const arr = oneCategory.value?.childDataVo || []
  const mainPush = customerDetail.value.customCategoryVo?.mainPush
  const list  = mainPush ? mainPush.split(',') : []
  const labelList: string[] = []
  arr.forEach((item: any) =>  {
    if (list.includes(item.dictValue)) labelList.push(item.dictLabel)
  })
  return labelList.join(',')
})
const partnerType = ref<Record<string, any>[]>([])

function getCustomMode(type: string) {
  if (type === 'Y') return '是'
  if (type === 'N') return '否'
  return ''
}

function getLogo(val: string) {
  return val ? val.split(',') : [];
}

function getPartnerType(type: string) {
  const part = partnerType.value.find((item: any) => type === item.dictValue)
  return part?.dictLabel
}

watch(() =>customerDetail.value.companyType, (val: string) => {
  if (val === '3') {
    // 工厂品类
    dictList('factory_category').then((res) => {
      categoryData.value = res.rows || [];
    })
  }
  if (val === '4') {
    // 服务商品类
    dictList('provider_category').then((res) => {
      categoryData.value = res.rows || [];
    })
  }
  if (val === '5') {
    // 达人机构品类
    dictList('talent_org_category').then((res) => {
      categoryData.value = res.rows || [];
    })
  }
})

dictList('partner_type').then((res) => {
  partnerType.value = res.rows || [];
})

defineExpose({cloudBoxRef})

defineComponent({name: 'CloudInfo'})
</script>

<style scoped lang="scss">
.cloud-info {
  width: 100%;
  padding: 20px;
  background-color: #fff;

  .cloud-title {
    margin-top: 15px;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 20px;
    color: #2E3244;
  }

  .cloud-text {
    margin-bottom: 6px;
    font-size: 14px;
    color: #666;
  }

  .partner-box {
    margin: 30px 0;

    .title {
      color: #000;
      font-weight: 700;
    }

    .partner-main {
      display: flex;
      flex-wrap: wrap;
    }

    .partner-item {
      width: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 30px;
      margin-top: 30px;

      >div, p {
        margin-top: 6px;
      }

      p {
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .category-item {
    margin-top: 20px;
    span {
      color: #000;
      font-weight: 700;
    }
  }
}
</style>
